<template>
  <div class="service-list">
    <div class="item">
      <div class="payment">
        <ul>
          <li>
            <a href="#">
              <img
                src="https://img11.360buyimg.com/jdphoto/s40x40_jfs/t14911/113/1615678148/168/7734f24f/5a53578eN0e2811b6.png"
              />
              <p>待付款</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img
                src="https://img11.360buyimg.com/jdphoto/s40x40_jfs/t14608/2/1636876268/266/b4ebb3f2/5a535791N627c296c.png"
              />
              <p>待收货</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img
                src="https://img11.360buyimg.com/jdphoto/s40x40_jfs/t15049/345/1573771240/492/7ef15694/5a5357eaNab882dcb.png"
              />
              <p>退换/售后</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img
                src="https://img30.360buyimg.com/jdphoto/jfs/t14953/346/2113764063/185/1a1dcd24/5a6d7b8bN8431ea1a.png"
              />
              <p>全部订单</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="service">
      <span>我的服务</span>
      <span class="arrow-right"><i class="iconfont icon-arrow-right"></i></span>
    </div>
    <div class="item">
      <div class="payment">
        <ul>
          <li>
            <a href="#">
              <i class="iconfont icon-wodeyue"></i>
              <p>我的余额</p>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont icon-dizhicopy"></i>
              <p>地址信息</p>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont icon-wodeshoucang"></i>
              <p>我的收藏</p>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont icon-youhuiquan"></i>
              <p>优惠券</p>
            </a>
          </li>
          <li v-if="id !== 22">
            <router-link to="/chat">
              <i class="iconfont icon-wode_fuwuzhongxinx"></i>
              <p>联系客服</p>
            </router-link>
          </li>
          <li v-if="id === 22">
            <router-link to="/message">
              <i class="iconfont icon-wode_fuwuzhongxinx"></i>
              <p>我收到的消息</p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="service">
      <span>客户服务</span>
      <span class="arrow-right"><i class="iconfont icon-arrow-right"></i></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import jwtDecode from 'jwt-decode'
export default {
  name: "SelfServicelist",
  data() {
    return {
      id: jwtDecode(localStorage.getItem("token")).id
    };
  },
  components: {}
};
</script>

<style scoped lang="stylus">
  .service-list
    padding-top 5px

  .service-list
    .item
      background-color #ffffff

      .payment
        padding-top 15px

    .service
      width 100%
      margin 5px auto
      background-color #ffffff
      padding 5px 0 8px 25px
      box-sizing border-box
      line-height: 22px;

      span
        color #555555
        font-size 15px
        text-align left

      .arrow-right
        margin-left 240px

  .service-list .payment ul
    overflow hidden

    li
      width 25%
      float left
      position relative
      display block
      text-align center
      margin-bottom 0.46667rem

      a
        color #ff0000

      i
        font-size 20px

      img
        width 25%

      p
        font-size .32rem
        margin-top .06667rem
        color #666666
        ellipsis()
</style>
